<template>
<div>
    <ylheader :title="'发现'"></ylheader>
    <div class="all-hot-title" >精选推荐</div>
    <div class="loadmore-container" ref="discoveryWrapper" style="height:85vh">
      <div class="loadmore-ul">
        <div class="shuoshuo-new" v-if="listnodata" style="background:#ffffff;">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">还没有相关内容哦~</span>
        </div>
        <ul class="dicoveryul">
            <li  v-for="(items,index) in list" :key="index">        
                <div class="img-with-text" @click="gotodetail(items.topicId)">
                    <img  v-lazy="items.topicPicture" class="imgtextback"/>
                    <div class="discoverylabel" v-if="items.discoveryLabel!=null"><div>{{items.discoveryLabel}}</div></div>
                    <p  class="topiclisttitle">{{items.title}}</p>
                    <div class="follownumbase">
                        <span  class="yl-2gz follownumicon"></span>
                        <span  class="topiclistfollownumber">{{items.followNumber}}人关注 </span>
                    </div>
                </div>
            </li>
        </ul>
        <p style="height:0.33rem;"></p>
      </div>
    </div>
    <indexnavigation></indexnavigation>
</div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import indexnavigation from "src/components/index/indexnavigation.vue";
import api from "src/api/index";
export default {
  name:"discovery",
  data(){
    return {
       list:[],
       page: 1,
       totalPage: 0,
       is_r:false,
       listnodata:false,
    }
  },
  components:{
    ylheader,
    api,
    indexnavigation
  },
  mounted(){
      this.queryDiscovery().then(data=>{
        this.initScroll();
      }).then(data => {
        this.$nextTick(() => {
          if (!!this.myscroll) this.myscroll.refresh();
        });
        let loadmore = document.getElementsByClassName("loadmore-ul");
        if ("discovery2detail" == localStorage.turnCount) {
          if (loadmore.length > 0) {
            setTimeout(() => {
              loadmore[0].style.transform = localStorage.turnBackDiscovery;
            }, 0);
          }
          localStorage.turnCount = "";
        } 
    });
  },
  methods:{

    queryDiscovery(){
         let p = new Promise((resolve, reject) => {
            if ("discovery2detail" == localStorage.turnCount) {
              let discoveryObj = JSON.parse(localStorage.discoveryStorage);
              this.list = discoveryObj.list;
              this.page = discoveryObj.page;
              this.totalPage = discoveryObj.totalPage;
              if(this.page<this.totalPage){
                this.is_r=false;
              }
              resolve(true);
            }else{
              const data = {
                  page: this.page,
                  limit: 10,
              }
              api.queryDiscovery(data).then(res => {
                  if(res.success){
                       this.totalPage = res.data.totalPage
                      this.list = this.is_r
                     ? [...this.list, ...res.data.list]
                     : res.data.list;
                     if(this.page<res.data.totalPage){
                         this.is_r=false;
                     }
                     if(this.list.length==0){
                         this.listnodata = true;
                     } else{
                       this.listnodata = false;
                     }
                     if(this.myscroll){
                       this.$nextTick(() => {
                         this.myscroll.refresh();
                       });
                     } 
                     let discoveryObj = JSON.stringify({
                       list:this.list,
                       page: this.page,
                       totalPage: this.totalPage,
                     });
                     localStorage.discoveryStorage = discoveryObj;
                  }
              })
            }

            resolve("获取发现列表....");
         });
         return p;
    },   
     initScroll() {
      let p = new Promise((resolve, reject) => {
        let discoveryWrapper = this.$refs.discoveryWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(discoveryWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if ((this.y <= (this.wrapperH - this.scroller.clientHeight-50))&& _this.is_r == false) {
                _this.is_r = true;
                if(_this.page<_this.totalPage){
                  _this.page++;
                  _this.queryDiscovery();  
                }
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    gotodetail(data){
      localStorage.turnCount = "discovery2detail";
      this.getTransformState();
        this.$router.push({
          path:"/topicdetail",
          query:{topicId:data}
        })
    },
    //获取跳转前的位置
    getTransformState() {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackDiscovery = loadmore[0].style.transform;
      }
    }
  }
}
</script>
<style scoped>
.img-with-text{
    background: #ffffff;
    position: relative;
    margin-bottom: 0.28rem;
    width: 3.35rem;
    height: 3.1rem;
    border-radius: 0.1rem;
}
.imgtextback{
  width: 100%;
  height: 1.67rem;
  border-radius: 0.1rem 0.1rem 0 0;
}
.img-with-text p{
  margin: 0;
}
.topiclisttitle{
  font-size: 0.24rem;
  color: #333;
  padding: 0.07rem 0.2rem 0.1rem 0.2rem;
  font-family: PingFangSC Medium;
  line-height: 0.36rem;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}

.topiclistfollownumber{
  font-size: 0.24rem;
  color: #999999;
}
 .hottopictitle {
  font-size: 0.24rem;
  color: #333;
  width: 1.88rem;
  height: 0.44rem;
  line-height: 0.44rem;
  position: absolute;
  top: 0.3rem;
} 
.indexhottuati{
  display: flex;
  align-items: center;
  justify-content: center
}
.dicoveryul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    align-content: flex-start;
}
.dicoveryul li{
    padding-left: 0.28rem;
}
.follownumbase{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0.2rem;
    padding:0 0.2rem;
}
.follownumicon{
    font-size: 0.26rem;
    color: #999999;
}
.all-hot-title {
  background: #f5f5f5;
  height: 0.8rem;
  padding:0.02rem 0 0 0.3rem;
  font-size: 0.3rem;
  display: flex;
  align-items: center;
  font-family: "PingFangSC Regular";
  color: #3a3a3a;
}
.discoverylabel{
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  color: #ffffff;
  font-size: 0.22rem;
  border-radius:0.22rem;
}
.discoverylabel div{
  padding: 0.02rem 0.15rem;
}
</style>

